<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#jd{
		width:670px;
		height: 240px;
		border: 4px solid blue;
		margin: 100px auto;
		position: relative;
	}
	#jd img{
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
	#jd ul{
		position: absolute;
		left: 502px;
		top: 211px;
	}
	#jd ul li{
		width: 22px;
		height: 22px;
		background: #999999;
		list-style: none;
		float: left;
		margin-right: 5px;
		border-radius: 50%;
		font-size: 12px;
		line-height: 22px;
		text-align: center;
		color: white;
		font-family: Arial,Verdana,"宋体";
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var c = 0;
		var imgs = document.getElementById('jd').getElementsByTagName('img');// 抓到所有图片
		var lis = document.getElementById('jd').getElementsByTagName('li');//抓到所有的li标签

		timer = setInterval(autoRun,1000);

		function autoRun(){
			c++;
			if(c==6){//判断c的范围
				c=0;
			}
			// 让c号图片显示，其他的隐藏
			for(var i=0;i<6;i++){
				if(i==c){
					imgs[i].style.display = 'block';//让i号图片显示
					lis[i].style.background = '#E43C3F';//让i号li变红色
				}else{
					imgs[i].style.display = 'none';//将当前图片隐藏
					lis[i].style.background = '#999';//让不是c号的li变成灰色
				}
			}
		}

		// 给所有的li加鼠标移入效果
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover = function(){
				clearInterval(timer);//清理定时器
				// 获得当前li的序号
				for(var j=0;j<lis.length;j++){
					if(this == lis[j]){
						c = j;//将li的序号存到c里
					}
				}

				// 让c号图片显示，其他的隐藏
				for(var i=0;i<6;i++){
					if(i==c){
						imgs[i].style.display = 'block';//让i号图片显示
						lis[i].style.background = '#E43C3F';//让i号li变红色
					}else{
						imgs[i].style.display = 'none';//将当前图片隐藏
						lis[i].style.background = '#999';//让不是c号的li变成灰色
					}
				}

			}

			// 给每个li加鼠标移出的效果
			lis[i].onmouseout = function(){
				timer = setInterval(autoRun,1000);//恢复定时器
			}
		}
	}
</script>
</head>

<body>

	<div id="jd">
		<!-- img[src=images/$.jpg]*6 -->
		<img src="images/1.jpg" style="display:block;" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<ul>
			<li style="background:#E43C3F;">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>


</body>
</html>
